import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

/**
 * 
 * @imageView组件的封装
 * 
 * @param { src: 传入的图片路径 }
 * @param { round: 图片是否为圆形的参数判断 }
 * 
 * @param { 事件：图片上的点击事件 prop.imgClick }
 * 
 * 
 */


const ImageView = (props) => {
  return (
    <ImageViewWrapper round={props.round}
     onClick={() => { props.imgClick && props.imgClick() }}
    >
      <img src={props.src} alt='' />
    </ImageViewWrapper>
  )
}

// 组件类型验证
ImageView.propTypes = {
  round: PropTypes.bool, 
  src: PropTypes.string
}


// styled样式传参数 必须使用 箭头形式 props => props.round 这种形式才能获取到标签上的值
const ImageViewWrapper = styled.div`
  width: 100%;
  height:100%;  
  img {
    width: 100%;
    height: 100%;
    border-radius: ${props => props.round ? '50%' : '0'};
  }
`;

export default ImageView;
